<!--
 * @Date: 2022-03-18 11:41:03
 * @Author: 陶子
 * @LastEditTime: 2023-03-22 16:32:02
 * @FilePath: \jk_one-stop_pc\src\views\managementSettings\dictList.vue
 * @pageName: 这是--(数据字典)--页面
-->
<template>
  <div>
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['管理设置']" currentMenu="数据字典"></crumbs>
    <div class="cardBox">
      <div class="cardOne">
        <div class="listBox">
          <a-tree v-if='treeListData.length>0' show-line :defaultExpandAll='true' @select="onSelect" :selectedKeys="selectedKeys">
            <a-tree-node v-for="itemParent in treeListData" :key="itemParent.id" :title="itemParent.name" :selectable='false'>
              <a-tree-node v-for="itemSon in itemParent.child" :key="itemSon.id" :title="itemSon.name">
                <img src="@/assets/img/select.png" v-if="selectedKeys[0]==itemSon.id" slot="switcherIcon" alt="" style="margin-left:10px;">
                <img src="@/assets/img/blank.png" v-else slot="switcherIcon" style="margin-left:10px;" alt="" @click="onSelect([itemSon.id])">
              </a-tree-node>
            </a-tree-node>
          </a-tree>
        </div>
      </div>
      <div class="cardTwo">
        <a-card :bordered="false" size="small" style="height:100%;margin-top:12px" :bodyStyle="computedWidth">
          <onlyOneClass v-if="currentClassType=='onlyOneClass'" ref="onlyOneClass" />
          <haveThreeClass v-if="currentClassType=='haveThreeClass'" ref="haveThreeClass" />
        </a-card>
      </div>
    </div>
  </div>
</template>
<script>
import { treeDataApi } from '@/api/erpApi'
import crumbs from '@/components/crumbs.vue'
import onlyOneClass from '@/views/managementSettings/onlyOneClass.vue'
import haveThreeClass from '@/views/managementSettings/haveThreeClass.vue'
import { mapState } from 'vuex'
export default {
  components: { crumbs, onlyOneClass, haveThreeClass },
  data() {
    return {
      isOpen: true,
      currentClassType: '',
      treeListData: [],
      selectedKeys: [],
    }
  },
  computed: {
    ...mapState({
      collapsed: (state) => state.user.collapsed,
    }),
    computedWidth() {
      let str = {}
      if (this.isOpen && this.collapsed) {
        str.width = 'calc(100vw - 350px)'
      }
      if (!this.isOpen && this.collapsed) {
        str.width = 'calc(100vw - 130px)'
      }
      if (this.isOpen && !this.collapsed) {
        str.width = 'calc(100vw - 455px)'
      }
      if (!this.isOpen && !this.collapsed) {
        str.width = 'calc(100vw - 230px)'
      }
      return str
    },
  },
  created() {
    treeDataApi().then((res) => {
      if (res.success) {
        this.treeListData = res.result.filter(item => item.name == '仓库管理' || item.name == '物品管理')
        this.selectedKeys = [this.treeListData[0].child[0].id]
        this.currentClassType = this.treeListData[0].child[0].type == 'category' ? 'haveThreeClass' : 'onlyOneClass'
        if (this.currentClassType == 'onlyOneClass') {
          this.$nextTick(() => {
            this.$refs.onlyOneClass.showData(this.selectedKeys[0], 'dict')
          })
        } else {
          this.$nextTick(() => {
            this.$refs.haveThreeClass.showData(this.selectedKeys[0], 'category')
          })
        }
      } else {
        this.$antdMessage.warning(res.message)
      }
    })
  },
  methods: {
    //   树选择
    onSelect(selectedKeys) {
      if (selectedKeys.length > 0) {
        this.selectedKeys = selectedKeys
        let selectKey = selectedKeys[0]
        let justOne = true
        for (let item of this.treeListData) {
          for (let node of item.child) {
            if (node.id == selectKey) {
              if (node.type == 'category') {
                justOne = false
              }
            }
          }
        }
        this.currentClassType = ''
        if (justOne) {
          this.currentClassType = 'onlyOneClass'
          this.$nextTick(() => {
            this.$refs.onlyOneClass.showData(this.selectedKeys[0], 'dict')
          })
        } else {
          this.currentClassType = 'haveThreeClass'
          this.$nextTick(() => {
            this.$refs.haveThreeClass.showData(this.selectedKeys[0], 'category')
          })
        }
        this.$forceUpdate()
      }
    },
    goBack() {
      // alert('提交成功')
      // this.$router.go(-1)
    },
  },
}
</script>
<style scoped lang='less'>
@import '~@/assets/less/public.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.table-operations {
  margin-bottom: 16px;
}

.table-operations > button {
  margin-right: 8px;
}

.pubColor {
  font-size: 14px;
  color: #1890ff;
  cursor: pointer;
}
/deep/ .ant-card-body {
  height: calc(100vh - 140px);
  overflow: hidden;
  padding: 20px 16px;
}
.filter-tit {
  background: #fff;
  border-bottom: 1px solid @greyBorder;
  font-size: @fontSize4;
}
.filter-num {
  color: @normalFont;
}
.filter-body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.margin-btn {
  margin-right: @distance5;
}

.cardBox {
  .flex(space-between, flex-start);
  .cardOne {
    width: 220px;
    margin-right: 16px;
    height: calc(100vh - 140px);
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;

    margin-top: 12px;
    box-sizing: border-box;
    .inputBox {
      box-sizing: border-box;
      padding: 20px 16px 0;
    }
  }
  .cardTwo {
    flex: 1;
  }
}
div.listBox {
  height: calc(100% - 20px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 24px 16px;
  div.itemList {
    .flex(space-between, center);
    height: 34px;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0 16px;

    div.itemLeft {
      font-size: 14px;
      color: #444444;
    }

    div.itemRight {
      font-size: 14px;
      color: #444444;
    }
    &:nth-child(n + 2) {
      div.itemLeft {
        font-size: 14px;
        color: #444444;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 130px;
      }

      div.itemRight {
        font-size: 14px;
        color: #444444;
      }
    }
  }

  div.haveColor {
    .flex(space-between, center);
    height: 34px;
    background: #e3f2ff;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0 16px;
    div.itemLeft {
      font-size: 14px;
      color: #1890ff;
    }

    div.itemRight {
      font-size: 14px;
      color: #1890ff;
    }
    &:nth-child(n + 2) {
      div.itemLeft {
        font-size: 14px;
        color: #1890ff;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 130px;
      }

      div.itemRight {
        font-size: 14px;
        color: #1890ff;
      }
    }
  }
}
a {
  margin: 0;
}
/deep/ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background-color: #fff;
  color: @normalFont;
}
</style>
